//修改登录密码
<template>
  <div class="login-pwd">
    <!-- <b-row>
      <b-col lg="5" md="5" sm="6" class="input-item">
        <div class="item-name"></div>
        <div>
          <span style="color:#ccc">{{$t('u_ndzh')}}</span>
          <span>{{phone}}</span>
        </div>
      </b-col>
    </b-row> -->
    <div>
        <div class="deyi">修改登录密码</div>
          <span style="float: right;margin-right: 30px; margin-top: -23px;" v-on:click="tanchuan"><img src="../../assets/img/images/guan_bi.png" alt=""></span>

        <!-- 旧密码 -->
        <b-row>
          <b-col lg="5" md="5" sm="6" class="input-item">
            <div class="item-name">{{$t('u_jmm')}}</div>
            <b-input type="password" class="item-val" v-model="old_pwd" :placeholder="$t('u_qsrjmm')"></b-input>
          </b-col>
        </b-row>

        <b-row>
          <b-col  class="input-item">
            <div class="item-name">{{$t('u_szmm')}}</div>
            <b-input type="password" class="item-val" v-model="password_1" :placeholder="$t('u_mmcdzzj')"></b-input>
          </b-col>
        </b-row>

        <b-row>
          <b-col  class="input-item">
            <div class="item-name">{{$t('u_cfmm')}}</div>
            <b-input type="password" class="item-val" v-model="password_2" :placeholder="$t('u_qcfsmdmm')"></b-input>
          </b-col>
        </b-row>
       

        <b-row>
          <b-col  class="input-item" style="position: relative;">
            <div class="item-name">{{$t('u_yzm')}}</div>
            <b-input class="item-val" v-model="mgsCode" :placeholder="$t('u_qslyzm')"></b-input>
            <b-button class="phone-code" :disabled="ifDisabled" @click="currentGetPhoneCode" variant="outline-secondary">{{btnText}}</b-button>
          </b-col>
        </b-row>
         <b-row style="margin-top: 37px;">
          <b-col class="input-item" style="position: relative;" >
            
            <!-- <b-input class="item-val" placeholder="重复上面的密码"></b-input> -->
            <b-button class="submit-btn" :disabled="once" @click="pwdUpdate" variant="success">{{$t('u_bc')}}</b-button>
          </b-col>
        </b-row>
    </div>
    <!-- <div v-else>
         <div style="width:151px;height:151px;margin: 26px auto;">
                <img style="width:100%;height:100%" src="/src/assets/img/images/images/images/chengong_03.gif" alt=""/>
                </div>
            <div class="chenggong" style="text-align:center">修改登录密码成功</div>
    </div> -->
  </div>
</template>

<script>

import { mapActions, mapState } from "vuex";
import { userNameTransform, isPhoneNum } from "../../assets/js/common";
import mixins from "../../assets/js/mixin";

export default {
  mixins: [mixins],
  data() {
    return {
      neirong:0,
      ifDisabled: false,
      btnText: this.$t('u_hqyzm'),
      timer: null,

      old_pwd: "",
      password_1: "",
      password_2: "",
      mgsCode: "",

      once: false,

      phone: "",
      mobile: "",

      cb_path: "",

    }
  },
  methods: {
    tanchuan(){
          this.$emit('child-say')
      },
    init() {
      this.password_1 = "";
      this.password_2 = "";
      this.mgsCode = "";
    },
    passwordTesting() {
      if (this.old_pwd == '') {
        this.$swal(this.$t('u_jmmbnwk'),{
					icon:'/static/img/tan_chuang.png'
				});
        return false;
      }
      if (this.password_1 == "") {
        this.$swal(this.$t('u_mmbnwk'),{
					icon:'/static/img/tan_chuang.png'
				});
        return false;
      }
      if (!/^[A-Za-z0-9]\w{5,15}$/.test(this.password_1)) {
        this.$swal(this.$t('u_mmbhszdxxzm'),{
					icon:'/static/img/tan_chuang.png'
				});
        return false;
      }
      if (this.password_1 != this.password_2) {
        this.$swal(this.$t('u_cfsrdmmbyz'),{
					icon:'/static/img/tan_chuang.png'
				});
        return false;
      }
      return true;
    },
    currentGetPhoneCode() {
      if (isPhoneNum(this.mobile)) { // 手机
        this.getPhoneCode(this.mobile).then(res => {
          if (res.data.code == "001") {
            this.countdown();
          }
        });
      } else { //邮箱
        this.$http.get('/nb-web/api/system/code/email', {
          params: { account: this.mobile, }
        }).then(res => {
          if (res.data.code == "001") {
            this.countdown();
          } else {
            this.$swal(res.data.msg,{
					icon:'/static/img/tan_chuang.png'
				})
          }
        })
      }
    },

    pwdUpdate() {
      //修改密码
      if (this.mgsCode == '') {
        //验证码不能为空
        this.$swal(this.$t('u_yzmbnwk'),{
					icon:'/static/img/tan_chuang.png'
				});
        return false;
      }
      if (!this.passwordTesting()) {
        return false;
      }
      this.once = true;
      this.getPublicKey().then(key => {
        let encrypt = this.$JSEncrypt;
        encrypt.setPublicKey(key);
        this.$http
          .post("/nb-web/api/user/modify/password", {
            newPassword: encrypt.encrypt(this.password_1),
            oldPassword: encrypt.encrypt(this.old_pwd),
            msgCode: this.mgsCode
          })
          .then(res => {
            this.once = false;
            if (res.data.code == "001") {
              this.$swal(res.data.msg,{
					icon:'/static/img/dagou.png'
				}).then(val => {
                // this.gotoRoute('/user/account/account_msg')
                // this.loginOut();
                this.loginChange(false)
                this.gotoRoute('/login');
              });
              this.init();
              this.neirong = 1
            } else {
              this.$swal(res.data.msg,{
					icon:'/static/img/tan_chuang.png'
				});
            }
          });
      });
    },

    //退出登录
    loginOut() {
      this.$http.post('/nb-web/api/user/login/out').then(res => {
        if (res.data.code == '001') {
          this.$http.defaults.headers.common['userId'] = "";
          this.$http.defaults.headers.common['ticket'] = "";
          this.$http.defaults.headers.common['account'] = "";
          this.$cookie.setCookie('userId','');
          this.$cookie.setCookie('ticket','');
          this.$cookie.setCookie('account','');
          this.gotoRoute('/login');
        } else {
          this.$swal(res.data.msg,{
					icon:'/static/img/tan_chuang.png'
				})
        }
      })
    },


    ...mapActions(['accountTabActiveChange', 'ifLoadingChange', 'loginChange'])
  },
  created() {
    this.mobile = this.$cookie.getCookie('account');
    this.phone = userNameTransform(this.$cookie.getCookie('account'));
    this.accountTabActiveChange(4);
      console.log("shuchu"+this.phone+" "+this.mobile)
  }
}
</script>

<style lang="scss" scoped>
.phone-code{
  position: absolute;
    left: 456px;
    top: 52px;
    height: 26px;
    line-height: 26px;
    padding: 0;
    border-radius: 0;
    border-left: 1px solid #99A7C8;
    font-family: PingFangSC-Medium;
    font-size: 16px;
    color: #1F3F87;
    letter-spacing: 0;
    border:0;
    background: transparent;
}
.phone-code:hover{
  background: transparent!important;
  font-family: PingFangSC-Medium;
font-size: 16px;
color: #1F3F87;
letter-spacing: 0;
}

.deyi{
    font-family: PingFangSC-Medium;
    font-size: 24px;
    color: #1F3F87;
    letter-spacing: 0;
    margin-left:30px;
}
.login-pwd {
  min-height: 600px;
  padding-top: 30px;
  .alert-tips {
    font-size: 12px;
  }
  .input-item {
    display: flex;
    padding: 10px;
    font-size: 14px;
        flex-direction: column;
    .item-name {
      width: 90px;
      margin-left: 37px;
      line-height: 38px;
      text-align: left;
      font-family: PingFangSC-Medium;
      font-size: 16px;
      color: #1F3F87;
      letter-spacing: 0;
    }
    .item-state {
      line-height: 38px;
      text-align: left;
    }
    .item-val {
      flex: 1;
      font-size: 14px;
          width: 520px;
    margin-left: 38px;
    box-shadow: 0;
    }
  }
  .submit-btn {
    width: 276px;
    height: 50px;
    background-image: linear-gradient(-90deg, #6CA5FF 1%, #5291FF 99%)!important;
    border-radius: 10px;
    font-family: PingFangSC-Medium;
    font-size: 18px;
    color: #FFFFFF;
    letter-spacing: 0;
    text-align: center;
    left: 0;
    top: 36px;
    right: 0;
    margin: auto;
  }
}
.form-control:focus{
  box-shadow:none;
  border-color:none;
}
</style>


